<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>IDEAL-PINPOINT</title>
		<!-- 引入JQuery -->
		<script type="text/javascript" src="../easyui-jquery/jquery.min.js"></script>
		<!-- 引入EasyUI -->
		<script type="text/javascript" src="../easyui-jquery/jquery.easyui.min.js"></script>
		<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
		<script type="text/javascript" src="../easyui-jquery/locale/easyui-lang-zh_CN.js"></script>
		<!-- 引入EasyUI的样式文件-->
		<link rel="stylesheet" href="../easyui-jquery/themes/default/easyui.css" type="text/css" />
		<!-- 引入EasyUI的图标样式文件-->
		<link rel="stylesheet" href="../easyui-jquery/themes/icon.css" type="text/css" />

		<script>
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}

			$(function() {

				var traceIdP = GetQueryString("traceId");
				var agentIdP = GetQueryString("agentId");
				var spanIdP = GetQueryString("spanId");
				var focusTimestampP = GetQueryString("focusTimestamp");

				/*var traceIdP = "payg1^1505960531500^15";
				var agentIdP = "payg1";
				var spanIdP = "-675600419267738385";
				var focusTimestampP = "1505961338730";*/
				jQuery.ajax({
					type: 'GET',
					url: 'http://localhost:8041/my/transactionInfo',
					cache: false,
					dataType: 'text',
					data: {
						traceId: traceIdP,
						agentId: agentIdP,
						spanId: spanIdP
					},
					success: function(result) {

						var data = JSON.parse(result);
						var callStack = data.callStack;
						//						alert(callStack);
						$("#span1").text('Application :' + callStack[0][11]);
						$("#span2").text('TransactionId :' + traceIdP);
						$("#span3").text('AgentId :' + agentIdP);
						$("#span4").text('ApplicationName :' + callStack[0][4]);
						//						var tr = "<tbody>";
						str = $("<thead><tr><th align='left'>Method</th><th width='500' class='breakLine'>Argument</th><th align='left' >Start Time</th><th  align='left'>Gap(ms)</th><th align='left'>Exec(ms)</th><th align='left'>Exec(%)</th><th align='left'>Self(ms)</th><th align='left'>Class</th><th align='left'>API</th><th align='left'>Agent</th><th align='left' >Application</th></tr></thead><tbody>");
						$("table").append(str);

						$.each(callStack, function(i, item) {
							
							var aa = (callStack[i][16] / callStack[i][14]) * 100;

							tr = $("<tr><td align='left' width='300'>" + callStack[i][10] +
								"</td><td>" + callStack[i][11] +
								"</td><td align='left' width='150'>" + callStack[i][1] +
								"</td><td align='left' width='80'>" + callStack[i][13] +
								"</td><td align='left' width='80'>" + callStack[i][14] +
								"</td><td align='left' width='150'><div id='p' class='easyui-progressbar' data-options='value:" + aa +
								"' style='width:120px;'></div></td><td align='left' width='80'>" + callStack[i][16] +
								"</td><td align='left' width='80'>" + callStack[i][17] +
								"</td><td align='left' width='150'>" + callStack[i][19] +
								"</td><td align='left' width='80'>" + callStack[i][20] +
								"</td><td align='left' width='80'>" + callStack[i][4] + "</td></tr>");
							//动态生成列表
							
							$("table").append(tr);
						
						});
						
						$("table").append("</tbody>");
					
					},
					error: function(xhr, status, error) {
						alert(xhr.status);
					}
				});

			});
		</script>

	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',title:'ideal-pinpoint',split:true" style="height:100px;background: black;">
			<span id="span1" style="color: white;position:absolute;left:100px;"> </span>
			<span id="span2" style="color: white;position:absolute;left:400px;"></span>
			<span id="span3" style="color: white;position:absolute;left:800px;"></span>
			<span id="span4" style="color: white;position:absolute;left:1100px;"></span>

		</div>

		<div data-options="region:'center'" style="padding:5px;background:#eee;">
			<div id="tt" class="easyui-tabs" style="width:1360px;height:100px;">
				<div title="Head" style="padding:20px;display:none;">
					tab1

					<div id='p' class='easyui-progressbar' data-options='value:60' style='width:120px;'></div>

				</div>
				<div title="PermGen" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
					tab2
				</div>
				<div title="CpuLoad" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
					tab3

				</div>
			</div>
		</div>

		<div data-options="region:'south',title:'South Title',split:true" style="height:550px;width: 3000px;">
			<table title="Complex TreeGrid" class="easyui-treegrid" style="word-break:break-all; word-wrap:break-all;width:3500px;height:550px;TABLE-LAYOUT:fixed">

			</table>
		</div>
	</body>

</html>